import 'package:flutter/material.dart';
import 'package:photo_app/apis/api_methods.dart';

class PhotoDetailPage extends StatefulWidget {
  const PhotoDetailPage({super.key, required this.folderName});
  final String folderName;

  @override
  State<PhotoDetailPage> createState() => _PhotoDetailPageState();
}

class _PhotoDetailPageState extends State<PhotoDetailPage> {
  final ApiMethods _apiMethods = ApiMethods();

  List<dynamic> _fileList = [];

  void _getFileList() {
    _apiMethods.getFileList(widget.folderName).then((res) {
      setState(() {
        _fileList = res['data'] ?? [];
      });
    }).catchError((onError) {
      debugPrint('_getFileList onError: $onError');

      setState(() {
        _fileList = [];
      });
    });
  }

  @override
  void initState() {
    super.initState();
    _getFileList();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(slivers: <Widget>[
        // 自定义SliverAppBar
        _buildSliverAppBar(),
        _buildSliverGrid()
      ]),
    );
  }

  Widget _buildSliverAppBar() {
    final firstCover = _fileList.isNotEmpty ? _fileList[0]['fileUrl'] : '';
    return SliverAppBar(
      pinned: true,
      expandedHeight: 200,
      title: const Text('相册'),
      centerTitle: true,
      // 使用FlexibleSpaceBar来实现滑动渐变效果
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          firstCover,
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) {
            return Image.network(
              'https://picsum.photos/1000/400',
              fit: BoxFit.cover,
            );
          },
        ),
      ),

      // 可选：其他自定义属性，如actions、iconTheme等
    );
  }

  Widget _buildSliverGrid() {
    return SliverPadding(
      padding: const EdgeInsets.all(10),
      sliver: SliverGrid(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 10.0, // 主轴方向的间距
          crossAxisSpacing: 10.0, // 交叉轴方向的间距
          childAspectRatio: 1.0,
        ),
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                debugPrint('$index');
              },
              child: _photoBox(index),
            );
          },
          childCount: _fileList.length,
        ),
      ),
    );
  }

  Widget _photoBox(int index) {
    final dynamic fileItem = _fileList[index];
    return Container(
      // 设置矩形盒子的尺寸
      width: 120,
      height: 120,

      // 添加带有圆角的装饰
      decoration: const BoxDecoration(
        color: Colors.white, // 可选：设置填充颜色
        boxShadow: [BoxShadow(blurRadius: 2)],
      ),

      // 可选：添加子组件或内容
      child: Image.network(
        fileItem['fileUrl'],
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) {
          return Image.network(
            'https://picsum.photos/120/120?index=$index',
            fit: BoxFit.cover,
          );
        },
      ),
    );
  }
}
